<template>
  <div class="supplier_brand">
    <div class="nav_box">
      <van-nav-bar title="品牌资质" right-text="编辑" left-arrow @click-left="router.back()" @click-right="onClickRight">
        <template #right>
          <van-image :src="bianji" class="bianji" />
          编辑
        </template>
      </van-nav-bar>
    </div>
    <div class="supplier_brand_content">

      <div class="card_box">

        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">品牌名称</div>
          <div class="value">{{ detailInfo.brandName }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">品牌商标注册证</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.brandImage" width="90" height="90" type="small" />
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">商标授权使用证明</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.usageImage" width="90" height="90" type="small" />
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">使用授权品类</div>
          <div class="value">
            {{ detailInfo.usages }}
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">店铺销售授权</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.sellImage" width="90" height="90" type="small" />
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">销售授权品类</div>
          <div class="value">
            {{ detailInfo.sells }}
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">其他补充资质</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.otherImage" width="90" height="90" type="small" />
          </div>
        </div>
        <div class="supplier_detail_content_div ">
          <div class="label">联名款/其他授权</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.jointlyImage" width="90" height="90" type="small" />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { getbrandId } from '@/api/supplierList/index'
import { getEnvValue } from "@/utils/index";
import IsImgPdf from '@/components/isImgPdf/index.vue'
const bianji = new URL("@/assets/porduct/bianji.png", import.meta.url).href;
const route = useRoute()
const router = useRouter()
const detailInfo = ref<any>({})
/** 供应商id */
const uniquekey = computed(() => {
  return route.params.id
})
/** 品牌id */
const supplierId = computed(() => {
  return route.query.ids
})
const getInfo = async () => {
  const res = await getbrandId(supplierId.value)
  res.data.brandImage = res.data.brandImage ? getEnvValue("VITE_APP_PIC_URL") + res.data.brandImage : ''
  res.data.usageImage = res.data.usageImage ? getEnvValue("VITE_APP_PIC_URL") + res.data.usageImage : ''
  res.data.sellImage = res.data.sellImage ? getEnvValue("VITE_APP_PIC_URL") + res.data.sellImage : ''
  res.data.otherImage = res.data.otherImage ? getEnvValue("VITE_APP_PIC_URL") + res.data.otherImage : ''
  res.data.jointlyImage = res.data.jointlyImage ? getEnvValue("VITE_APP_PIC_URL") + res.data.jointlyImage : ''
  detailInfo.value = res.data
}
getInfo()
/** 编辑 */
const onClickRight = () => {
  router.push({ path: `/editBrandQualification/${supplierId.value}`, query: { supplierId: uniquekey.value } })
}
</script>
<style lang="less" scoped>
.supplier_brand {
  width: 100%;
  // height: calc(100vh);
  background-color: #F6FAFF;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 5px;

  .nav_box {
    height: 90px;
    width: 100vw;
    box-sizing: border-box;
    padding-top: 44px;
    background: linear-gradient(0deg, #FFFFFF 0%, #CDECFF 100%);
    position: fixed;
    z-index: 3000;
    top: 0;
  }

  .bianji {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px;

    :deep .van-image__img {
      width: 12px !important;
      height: 12px !important;
    }
  }

  :deep .van-nav-bar__right {
    color: #0094FF;
    font-size: 13px;
    display: flex;
    align-items: center;
  }

  .supplier_brand_content {
    width: 100%;
    margin-top: 90px;
    background-color: #F6FAFF;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 13px;
    padding: 10px 15px;

    .card_box {
      background: #fff;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 0 15px;
    }


    .supplier_detail_content_div {
      // height: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;

      .label {
        width: 115px;
        font-weight: 400;
        font-size: 14px;
        color: #464E5D;
        line-height: 14px;
      }

      .value {
        width: calc(100% - 115px);
        color: #B8BECA;
        // text-align: right;
        display: flex;
        justify-content: flex-end;
        font-weight: 400;
        font-size: 14px;
        color: #1A1B1C;
        line-height: 14px;
      }
    }

    .supplier_detail_content_divorder {
      border-bottom: 1px solid #F3F3FF;
    }
  }

  :deep .van-nav-bar {
    background-color: #1466ff00;
    height: 46px !important;
    width: 100%;
    position: fixed;
  }

  :deep .van-nav-bar__content {
    background-color: #1466ff00;
  }

  :deep .van-nav-bar__title {
    color: #000;
  }

  :deep .van-nav-bar__text {
    color: #000;
  }

  :deep .van-icon {
    color: #000;
  }

  // :deep .van-image__img {
  //     width: 30px;
  //     height: 30px;
  // }
}
</style>